/*
 * @Author: xiaosihan 
 * @Date: 2024-06-21 16:03:57 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-08-25 09:18:40
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./serviceCapability.module.less";
import PNG1 from "./1.png";
import PNG2 from "./2.png";
import PNG3 from "./3.png";
import PNG4 from "./4.png";
import PNG5 from "./5.png";
import PNG6 from "./6.png";
import PNG7 from "./7.png";
import userStore from "@views/userStore";
import hashHistory from "@hashHistory";
import loginStore from "@views/pc/LoginModal/loginStore";
import { LazyLoadImage } from 'react-lazy-load-image-component';

interface Iprops {
    children?: ReactNode
}

// 服务能力
export default function ServiceCapability() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    const [isLogin, setIsLogin] = useState(userStore.isLogin);

    useEffect(() => autorun(() => {
        setIsLogin(userStore.isLogin);
    }), []);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    return (
        <div className={styles.serviceCapability} >
            <div className={styles.title} >制造服务能力</div>
            <div className={styles.subTitle} >通过上传的工程文件或模型，快速且精准的选择最适合的供应商和加工设备及厂商，提供快速打样、小批量加工和大批量生产服务；完善的质量保障体系和双重质检标准，在规定交期内确保为客户交付高质量的产品</div>

            <div className={styles.imgList} >
                {
                    [
                        { name: "数控加工", dateil: "3-6轴加工,3-6 轴轴加工、镗铣床加工、龙门铣加工、CNC 铣削、车削、自动车加工、齿轮成型加工、专机整形加工", img: PNG1 },
                        { name: "金属板", dateil: "钣金弯曲和激光切割折弯、焊接、数控冲加工、切割、结构件、金属旋压", img: PNG2 },
                        { name: "注塑成型", dateil: "塑料、过模和插入成型注塑成型、多色注塑、吹塑成型、压塑成型、滚塑成型、吸塑成型、橡胶产品成型", img: PNG3 },
                        { name: "冲压成型", dateil: "普通冲压、拉深、级进模冲压、精密冲压", img: PNG4 },
                        { name: "3D打印", dateil: "FDM,SLS,SLA,MJF,Polyjet,DMLS,DLP", img: PNG5 },
                        { name: "铸造", dateil: "热室和冷室压铸普通冲压、拉深、级进模冲压、精密冲压", img: PNG6 },
                        { name: "锻造", dateil: "砂型铸造、压铸、熔模铸造、消失模铸造、金属型铸造、离心铸造", img: PNG7 }

                    ].map((item, i) => {
                        return (
                            <div className={styles.item} key={i} >
                                <div className={styles.text} >{item.name}</div>
                                <LazyLoadImage className={styles.img} src={item.img} alt="" />
                                <div className={styles.subText} >{item.dateil}</div>
                            </div>
                        );
                    })
                }

                <div className={styles.item_latest} >
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    <span
                        className={styles.putDemand}
                        onClick={() => {
                            if (isLogin) {
                                hashHistory.push("/updataModel");
                            } else {
                                loginStore.setShowLoginModal(true);
                            }
                        }}
                    >提交需求</span>
                    <span className={styles.learnMore} >了解更多 →</span>
                </div>

            </div>


        </div>
    );

}